<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 降级处理
        ES6模块导入浏览器无法直接被识别,需要降级处理-->
    <!-- 1. 需要引入babel文件：为了处理ES6模块导入导出 -->
    <script src="./babel.min.js"></script>
    <!-- 2. 告诉浏览器 处理哪个代码-->
    <script type="text/babel">
        import zs from "./index.js"; console.log(zs);
    </script>
    <!-- 3. 需要用IP+port方式 打开才能降级处理 -->




    <script>
        // yarn // ES6模块化：未来工作模式 

        // 初始化
        yarn  init
        // 下载
        yarn  add  下载的模块名
        // 删除
        yarn  remove  删除的模块名
        // 执行自定义命令   build代表 配置中scripts中定义的属性命令
        yarn  build
        // 自定义命令   在package.json文件中添加设置如下
        "scripts": {
            "build": "webpack"
        }
        // 修改入口出口
        1.建一个webpack.config.js文件
        2.yarn add webpack  webpack - cli
        配置文件如下:
        const path = require('path');
        path.join();
        module.exports = {
            // entry：入口l找哪个前端文件作为入口文件；
            entry: './aa/app.js',
            // output：出口
            output: {
                // 输出的路径   默认为 dist
                path: path.resolve(__dirname, 'bb'),
                // 最终打包后文件名 默认为 main.js
                filename: 'main.js',
            },
        };





        // 打包html
        // 下载依赖包
        yarn add html - webpack - plugin - D
        // webpack.config.js 中添加代码
        const HtmlWebpackPlugin = require('html-webpack-plugin');
        const path = require('path');
        module.exports = {
            // 插件：把哪个文件作为最终打包编译后前端 HTML文件输出
            plugins: [new HtmlWebpackPlugin({
                template: "./public/index.html"
            })],
        };





        // 打包css
        先将css代码引入js文件中     import "css文件路径"
        // 下载依赖包
        yarn add style - loader css - loader - D
        // webpack.config.js 中添加代码
        const HtmlWebpackPlugin = require('html-webpack-plugin')
        module.exports = {
            // ...其他代码
            module: {
                rules: [ // loader的规则
                    {
                        test: /\.css$/, // 匹配所有的css文件
                        // use数组里从右向左运行
                        // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
                        // 再用 style-loader 将样式, 把css插入到dom中
                        use: ["style-loader", "css-loader"]
                    }
                ]
            }
        }





        // 打包less
        将 less 代码引入js文件  import "less文件路径"
        // 下载依赖包
        yarn add less less - loader - D
        // webpack.config.js 中添加代码
        module: {
            rules: [ // loader的规则
                // ...省略其他
                {
                    test: /\.less$/,
                    // 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
                    use: ["style-loader", "css-loader", 'less-loader']
                }
            ]
        }




        // 打包压缩代码
        1.准备环境初始化
        2.下载 webpack和webpack - cli
        3.修改build命令 "build": "webpack"
        4.建立一个 src 文件夹, 在这里写js文件和css
        5.建立一个 public 文件夹, 在这里写html
        6.将所有文件引入入口js文件中 默认 index.js
        7.yarn build    生成一个dist文件夹, 里面会有压缩好的代码




    </script>
</body>

</html>